<template>
  <b-container style="background-color: rgb(246, 241, 232)" fluid>
    <b-container class="body">
      <transition
        appear
        enter-active-class="animated bounceInRight"
        leave-active-class="animated bounceOutLeft"
      >
        <b-row>
          <b-col></b-col>
          <b-col class="mainCard mt-4" sm="3">
            <b-container fluid>
              <pre class="mt-4 mb-0" />
              <b-row style="text-align: center">
                <h1>登 录</h1>
              </b-row>
              <pre class="mt-4 mb-0" />
              <b-row style="margin-top: 1%; text-align: right">
                <b-form-input v-model="username" placeholder="登录名" />
              </b-row>
              <b-row style="text-align: right">
                <b-col></b-col>
                <b-col sm="8">
                  <b-link class="linkStyle" @click="toRegister">
                    没有账户?点击注册
                  </b-link>
                </b-col>
              </b-row>

              <b-row style="margin-top: 0.3%; text-align: right">
                <b-form-input v-model="password" placeholder="密码" />
              </b-row>
              <b-row style="text-align: right">
                <b-col></b-col>
                <b-col sm="8">
                  <b-link class="linkStyle" @click="toRegister">
                    忘记密码?
                  </b-link>
                </b-col>
              </b-row>

              <b-row
                style="margin-top: 1%; text-align: right; margin-bottom: 7%"
              >
                <b-button @click="login" block variant="success">确定</b-button>
              </b-row>
            </b-container>
          </b-col>
          <b-col></b-col>
        </b-row>
      </transition>
    </b-container>
  </b-container>
</template>
<script>
import axios from "axios";
export default {
  name: "TheLogin",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    //跳转注册
    toRegister() {
      this.$router.push({
        path: "/register",
        params: {
          title: "注册",
        },
      });
    },
    //查询用户
    login() {
      axios
        .get("http://localhost:8081/user/login", {
          params: {
            username: this.username,
            password: this.password,
          },
        })
        .then((res) => {
          if (res.data != '' && this.username != "" && this.password != "") {
            // localStorage.setItem("userId", res.data);
            localStorage.setItem("token",res.data.token);
            console.log("生成的token----->",localStorage.getItem("token"));
            this.$router.push({
              path: "/mainPage",
              params: {
                id: 1,
                title: "首页",
              },
            });
            // location.reload();
          } else {
            this.showResult();
          }
          console.log("data--->", res.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //失败的提示框
    showResult() {
      const h = this.$createElement;
      const titleVNode = h("p", ["return"]);
      var messageVNode = null;
      messageVNode = h("div", { class: ["foobar"] }, [
        h("p", { style: { color: "red" } }, ["用户名或密码错误"]),
      ]);
      this.$bvModal.msgBoxOk([messageVNode], {
        title: [titleVNode],
        centered: true,
        hideBackdrop: true,
        noCloseOnBackdrop: true,
        okTitle: "重试",
      });
    },
  },
};
</script>

<style scoped lang="css">
.mainCard {
  margin: 0.5%;
  border-radius: 10px;
  box-shadow: 0 2px 20px 0 rgba(92, 157, 211, 0.2);
  background-color: rgba(242, 242, 242, 0.906);
}
.body {
  background-image: url("https://api.ixiaowai.cn/mcapi/mcapi.php");
  background-position: center;
  background-size: 100%;
  height: 700px;
  max-width: 1500px;
  background-color: rgb(246, 241, 232);
}
</style>